<template>
	<view class="index1_content">
		<!-- 公司名称 -->
		<view class="index1_headers">
			<image style="width: 100rpx;height: 100rpx;border-radius: 24rpx;" :src="setImage(userInfoFull.avatar)"
				mode=""></image>
			<view class="index1_headers1">
				<view class="index1-username" @longpress="onLongPressUsername()" @touchend="onTouchEnd">
					Hello，{{lang=='zh'?userInfoFull.username:userInfoFull.username_ru}}</view>
				<div class="flex">
					<view class="role-tag">{{$t('运输公司')}}</view>
				</div>
			</view>
			<view style="width: 50rpx;height: 36rpx;" @click="handeleCard">
				<image style="width: 50rpx;height: 36rpx;" src="@/static/index2/index20.png" mode=""></image>
			</view>
		</view>
		<!-- <view class="gb">
			<image style="width: 40rpx;height: 40rpx;margin-left: 30rpx;margin-right: 16rpx;"
				src="@/static/index2/laba.png" mode=""></image>
			<view style="width: 1rpx;height: 42rpx;background-color: #FFFFFF;"></view>
			<u-notice-bar style="flex: 1;" :volume-icon="volume" color="#005299" type="none" mode="horizontal"
				:list="text1"></u-notice-bar>
		</view> -->
		<!-- 运输 -->
		<view class="index1_yunshu">
			<view class="index1_yunshu1" @click="handeleWeb">
				<image class="yunshu_images1" src="@/static/index2/22601x.png" mode=""></image>
				<view class="index1_myyunshu">{{$t('我的车辆')}}</view>
			</view>
			<view class="index1_yunshu1" @click="handeleMyOrder">
				<image class="yunshu_images2" src="@/static/index2/22591x.png" mode=""></image>
				<view class="index1_myyunshu">{{$t('我的订单')}}</view>
			</view>
		</view>
		<!-- 消息列表文字 -->
		<view class="index1_message">
			<image style="width: 32rpx;height: 32rpx;margin-right: 8rpx;" src="@/static/index2/22261x.png" mode="">
			</image>
			<span>{{$t('货源信息')}}</span>
		</view>
		<!-- <view style="width: 100%;height: 460rpx;"></view> -->
		<!-- 模块 -->
		<view class="list_block">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" refresher-enabled="true"
				:refresher-triggered="freshIsShow" @scrolltolower="lower" @refresherrefresh="fresh"
				@refresherrestore="store"
				refresher-background="background: linear-gradient(90deg, #82B0FC -2%, #90DAE6 105%);">
				<view v-if="arr.length>0 && listShow" class="index1_block" v-for="(item,index) in arr" :key="index"
					@click="handeleDetail(item)">


					<!-- 状态戳 -->

					<!-- 订单已失效 -->
					<template v-if="item.release_order.status == 3||item.release_order.is_deleted>0">
						<image src="/static/status/order_cancel.png" v-if="lang=='zh'" class="status-mask"
							mode="widthFix"></image>
						<image src="/static/status/order_cancel_ru.png" v-if="lang=='ru'" class="status-mask"
							mode="widthFix">
						</image>
					</template>

					<!-- 已中标 -->
					<template
						v-else-if="item.release_order.join_user_id != null && item.release_order.join_user_id == user_id">
						<image src="/static/status/order_start.png" v-if="lang=='zh'" class="status-mask"
							mode="widthFix"></image>
						<image src="/static/status/order_start_ru.png" v-if="lang=='ru'" class="status-mask"
							mode="widthFix">
						</image>
					</template>


					<!-- 已合作 合作方不是当前用户 -->
					<template
						v-else-if="item.release_order.join_user_id != null && item.release_order.join_user_id != user_id">
						<image src="/static/status/order_cancel.png" v-if="lang=='zh'" class="status-mask"
							mode="widthFix"></image>
						<image src="/static/status/order_cancel_ru.png" v-if="lang=='ru'" class="status-mask"
							mode="widthFix">
						</image>
					</template>

					<!-- 公司名称 -->
					<view class="index1_images">
						<image style="width: 100rpx;height: 100rpx;border-radius: 100rpx;"
							:src="setImage(item.release_user.avatar)" mode=""></image>
						<view class="index1_images1">
							<view class="index1_title1" @longpress="onLongPress(item.user)" @touchend="onTouchEnd">
								{{lang=='zh'?item.release_user.username:item.release_user.username_ru}}
							</view>
							<view class="index1_imagescx2" v-if="item.data.category">{{$t('所需车型')}}：
								{{lang=='zh'?item.data.category.name:item.data.category.name_ru}}
							</view>
						</view>
						<view class="index1_images3">
							<view class="index1_images4" @longpress="onLongPressmode(item.data)" @touchend="onTouchEnd">
								{{lang=='zh'?item.data.mode:item.data.mode_ru}}
							</view>
							<view class="index1_images5">
								{{lang=='zh'?item.data.whole_diffuse:item.data.whole_diffuse_ru}}
							</view>
						</view>
					</view>
					<!-- 订单编号 -->
					<view class="index1_order">
						<!-- 订单号  进行中 -->
						<view v-if="item.order"
							style="width: 100%;display: flex;justify-content: space-between;margin-bottom: 20rpx;align-items: center;">
							<view style="font-size: 22rpx;align-items: center;flex: 1;">
								<view :class="lang=='ru'?'numberStyle':''">{{$t('订单编号')}} :</view>
								<view :class="lang=='zh'?'orderText':'orderText_ru'"
									@longpress="onLongPressorder_no(item.order)" @touchend="onTouchEnd">
									{{item.order.order_no}}
								</view>
							</view>
							<view class="index1_order1" v-if="item.order.status==0">{{$t('待参与')}}</view>
							<view class="index1_order1" v-if="item.order.status==1">{{$t('已参与')}}</view>
							<view class="index1_order1" v-if="item.order.status==2">{{$t('进行中(已合作)')}}</view>
							<view class="index1_order1" v-if="item.order.status==3">{{$t('已取消/已关闭')}}</view>
							<view class="index1_order1" v-if="item.order.status==4">{{$t('申请售后')}}</view>
							<view class="index1_order1" v-if="item.order.status==5">{{$t('售后已退款')}}</view>
							<view class="index1_order1" v-if="item.order.status==6">{{$t('发布方确认收货(进行中)')}}</view>
							<view class="index1_order1" v-if="item.order.status==7">{{$t('已评价')}}</view>
							<view class="index1_order1" v-if="item.order.status==8">{{$t('同意延期付款(已完成)')}}</view>
							<view class="index1_order1" v-if="item.order.status==9">{{$t('未付款(不同意延期)')}}</view>
							<view class="index1_order1" v-if="item.order.status==10">{{$t('已完成')}}</view>
							<view class="index1_order1" v-if="item.order.status==11">{{$t('待开始')}}</view>
						</view>
						<view
							style="width: 100%;height: 24rpx;display: flex;justify-content: space-between;font-size: 22rpx;">
							<view style="display: flex;">
								<image v-if="item.data.departure_country==0" style="width: 40rpx;height: 24rpx;"
									src="@/static/ic0.png" mode=""></image>
								<image v-if="item.data.departure_country==1" style="width: 40rpx;height: 24rpx;"
									src="@/static/ic1.png" mode=""></image>
								<span style="margin-left: 10rpx;"
									v-if="item.data.departure_country==0">{{$t('中国')}}</span>
								<span style="margin-left: 10rpx;"
									v-if="item.data.departure_country==1">{{$t('俄罗斯')}}</span>
							</view>
							<view style="display: flex;align-items: center;height: 24rpx;">
								<image v-if="item.data.reach_country==0" style="width: 40rpx;height: 24rpx;"
									src="@/static/ic0.png" mode=""></image>
								<image v-if="item.data.reach_country==1" style="width: 40rpx;height: 24rpx;"
									src="@/static/ic1.png" mode=""></image>
								<span style="margin-left: 10rpx;" v-if="item.data.reach_country==0">{{$t('中国')}}</span>
								<span style="margin-left: 10rpx;" v-if="item.data.reach_country==1">{{$t('俄罗斯')}}</span>
							</view>
						</view>
						<view>
							<view style="width: 100%;height: 8rpx;background-color: #06C36E;margin-top: 17rpx;"></view>
						</view>
						<view class="address-detail">
							<view v-if="item.data.departure&&item.data.departure.mergename" class="address-info">
								{{lang=='zh'?cityReverse(item.data.departure.mergename):cityReverse(item.data.departure.mergename_ru)}}
							</view>
							<view v-else class="address-info">{{$t("不限")}}</view>
							<view style="margin-top: 9rpx;width: 144rpx;">
								<image style="width: 72rpx;height: 22rpx;" src="@/static/17251x.png" mode=""></image>
							</view>
							<view v-if="item.data.reach&&item.data.reach.mergename" class="address-info text-right">
								{{lang=='zh'?cityReverse(item.data.reach.mergename):cityReverse(item.data.reach.mergename_ru)}}
							</view>
							<view v-else class="address-info text-right">{{$t("不限")}}</view>
						</view>
					</view>
					<!-- 货物信息 -->
					<view class="index1_goods">
						<view style="width: 100%;min-height: 28rpx;display: flex;justify-content: space-between;">
							<view style="font-size: 28rpx;color: #000000;">{{$t('货物信息')}}</view>

							<view
								style="margin-left: 10rpx;display: flex;justify-content: flex-end;align-items: center;"
								v-if="Number(item.data.margin_price)>0">

								<span style="color: #FF0000;font-size: 24rpx;">{{$t('需缴保证金')}} :</span>
								<span
									style="color: #FF0000;font-size: 40rpx;font-weight: bold;margin-left: 10rpx;">{{item.data.margin_price}}</span>
								<span
									style="font-size: 24rpx;color:#ff0000;margin-left: 8rpx;position: relative;top: 5rpx;">/{{$t(item.data.price_unit)}}</span>
							</view>
						</view>
						<view class="index1_goods1">{{$t('货物名称')}}</view>
						<view
							style="color: #000000;font-size: 28rpx;font-weight: normal;margin-top: 12rpx;line-height: 30rpx;max-height: 90rpx;overflow: hidden;">
							{{lang=='zh'?item.data.goods_name?item.data.goods_name:'-':item.data.goods_name_ru?item.data.goods_name_ru:'-'}}
						</view>
						<view class="index1_goods2">
							<view class="index1_goods2_block">
								<view :class="lang=='zh'?'index1_goods2zh':'index1_goods2ru'">{{$t('大概总体积')}}</view>
								<view style="font-size: 28rpx;color: #000000;">
									{{lang=='zh'?item.data.goods_volume?item.data.goods_volume:0:item.data.goods_volume_ru?item.data.goods_volume_ru:0}}m³
								</view>
							</view>
							<view class="index1_goods2_block">
								<view :class="lang=='zh'?'index1_goods2zh':'index1_goods2ru'">{{$t('大概总重量')}}</view>
								<view style="font-size: 28rpx;color: #000000;">
									<span>
										{{lang=='zh'?item.data.goods_weight?item.data.goods_weight:0:item.data.goods_weight_ru?item.data.goods_weight_ru:0}}
									</span>
									<span style="font-size: 22rpx;">kg</span>
								</view>
							</view>
							<view class="index1_goods2_block">
								<view :class="lang=='zh'?'index1_goods2zh':'index1_goods3ru'">{{$t('需求数量')}}</view>
								<view style="font-size: 28rpx;color: #000000;">
									{{lang=='zh'?item.data.goods_num?item.data.goods_num:0:item.data.goods_num_ru?item.data.goods_num_ru:0}}
									{{lang=='zh'?item.data.number_unit:item.data.number_unit_ru}}
								</view>
							</view>
						</view>
					</view>
					<view class="index1_xq4">
						<div :disabled="communicateDisabled" style="font-size: 22rpx;" type="success" shape="circle"
							class="btn index_xq1" @click.stop="handeleUninterested(item,index)">{{$t('不感兴趣')}}</div>

						<div :disabled="communicateDisabled" style="font-size: 22rpx;" type="success" shape="circle"
							class="btn index_xq2" @click.stop="handeleWanttobuy(item)">{{$t('参与竞标')}}</div>

						<div :disabled="communicateDisabled" style="font-size: 22rpx;" type="success" shape="circle"
							class="btn index_xq3" @click.stop="handeleCommunicate(item)">{{$t('即时沟通')}}</div>
					</view>
				</view>
				<view v-if="arr.length===0 && listShow" class="Currently-unavailable">
					<u-empty :text="$t('数据为空')" mode="list"></u-empty>
				</view>
				<view style="height: 100rpx;"></view>
			</scroll-view>
		</view>
		<vipPopup v-if="vipShow" :show="vipShow" @handeleVip="clickVipPopup" />
		<u-popup v-model="show" mode="center" border-radius="32">
			<view class="longPressTextClass">{{longPressText}}</view>
		</u-popup>
		<!-- <view class="fb">
			<image @click="handeleFB" style="width: 110rpx;height: 110rpx;" src="@/static/index2/index19.png" mode="">
			</image>
		</view> -->
		<movable-area class="publish_wrap">
			<movable-view class="max" direction="vertical" x="0" y="0" :out-of-bounds="true">
				<image class="fb_img" @click="handeleFB" src="@/static/index2/index19.png" mode="widthFix">
				</image>
			</movable-view>
		</movable-area>
		<!-- 顶部背景色 -->
		<image style="width: 750rpx;height: 690rpx;position: absolute;top: 0;z-index: 1;"
			src="@/static/index2/20241101130857.png" mode=""></image>
	</view>
</template>

<script>
	//VIP弹窗
	import vipPopup from "@/components/vipPopup/index.vue";
	import {
		createC2CConversation,
		isBase64,
		time
	} from "@/common/public";
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from '@/config/app';
	export default {

		components: {
			vipPopup
		},
		data() {
			return {
				volume: false,
				text1: [],
				listShow: false,
				communicateDisabled: false,
				longPressText: '',
				show: false,
				userInfoFull: uni.getStorageSync('userInfoFull'),
				freshIsShow: true,
				scrollTop: 0,
				arr: [],
				indexID: -1,
				isShow: false,
				value: '', //输入框内容
				reason: '', //快捷选项原因
				type: 'textarea',
				height: '250rpx',
				border: true,
				autoHeight: true,
				page: 1,
				id: '',
				Current_index: '', //当前下标
				total: 0,
				limit: 20,
				vip: false,
				vipShow: false,
				lang: 'ru',
				placeholder: '@/static/order.png', // 本地占位图路径
				user_id: '',
			}
		},
		created() {
			// this.$eventBus.$on('getTransport', () => {
			// 	console.log('膜')
			// })
			this.user_id = uni.getStorageSync('userInfoFull').user_id;
			this.getLang()
			this.$eventBus.$on('getId', (id) => {
				if (id) {
					this.isEvent = true
				}
				console.log(id) //12
			})
			this.getData()
		},
		methods: {
			//国家、省份、城市 颠倒
			cityReverse(str) {
				return str.split(",").reverse().join(",");
			},
			// 发布
			handeleFB() {
				uni.switchTab({
					url: '/pages/tabbar/release/index'
				})
			},
			handeleCard() {
				uni.navigateTo({
					url: '/pages/tabbar/order/businessCard?id=' + this.user_id
				})
			},
			onLongPressorder_no(item) {
				// this.show = true
				// this.longPressText = item.order_no
			},
			// 松开
			onTouchEnd() {
				this.show = false
			},
			onLongPressUsername() {
				// this.show = true
				// if (this.lang == 'zh') {
				// 	this.longPressText = this.userInfoFull.username
				// } else {
				// 	this.longPressText = this.userInfoFull.username_ru
				// }
			},
			// 长按
			onLongPressmode(item) {
				// this.show = true
				// if (this.lang == 'zh') {
				// 	this.longPressText = item.mode
				// } else {
				// 	this.longPressText = item.mode_ru
				// }

			},
			// 长按
			onLongPress(item) {
				// this.show = true
				// if (this.lang == 'zh') {
				// 	this.longPressText = item.username
				// } else {
				// 	this.longPressText = item.username_ru
				// }
			},
			handelMessage() {
				uni.navigateTo({
					url: '/pages/tabbar/order/customer'
				})
			},
			handeleMyOrder() {
				uni.navigateTo({
					url: '/pages/tabbar/order/index'
				})
			},
			// 不感兴趣
			handeleUninterested(item, index) {

				uni.showModal({
					title: this.$t('提示'),
					content: this.$t('确认忽略？将无法找回此信息。'),
					confirmText: this.$t('确认'),
					cancelText: this.$t('取消'),
					success: res => {
						if (res.confirm) {
							this.communicateDisabled = true
							let data = {
								id: item.id,
								content: '',
								reason: ''

							}
							this.$u.api.basic.setRefuse(
								data
							).then(res => {
								this.arr.splice(index, 1)
								uni.showToast({
									icon: 'none',
									title: this.$t('操作成功')
								})
								this.communicateDisabled = false
							})
						} else if (res.cancel) {}
					}
				});

			},
			// 隐藏vip弹窗
			clickVipPopup() {
				console.log('隐藏');
				this.vipShow = false //点击vip弹窗隐藏
			},
			//参与竞标
			handeleWanttobuy(item) {

				// 不允许跳转逻辑

				//已合作 合作方不是当前用户  
				if (item.release_order.join_user_id != null && item.release_order.join_user_id != this.user_id) return
				//订单已失效 
				if (item.release_order.status == 3 || item.release_order.is_deleted > 0) return

				this.communicateDisabled = true
				setTimeout(() => {
					this.communicateDisabled = false
				}, 2000)
				// 先判断手机号，如果使自己手机号，自己不能和参与
				var mobile = uni.getStorageSync('mobile');

				if (mobile === item.release_user.mobile) {
					this.$u.toast(this.$t('不能参与自己'));
					return
				}
				this.$u.api.user.order_join_day_auth({
					lang: this.lang
				}).then(res => {
					if (res == 1) {
						//参与竞标
						uni.navigateTo({
							url: "/pages/order/process/buildOrder?type=transport&release_id=" + item.data
								.id
						})
					} else {
						if (this.vip) {
							this.vipShow = true
							return
						} else {
							uni.showModal({
								content: this.$t('您的权限不足哦!请联系工作人员!'),
								showCancel: false,
								confirmText: this.$t('是'),
							})
							return false;
						}
						return
					}
				})

			},
			// 即时沟通
			handeleCommunicate(item) {
				this.communicateDisabled = true
				setTimeout(() => {
					this.communicateDisabled = false
				}, 2000)
				createC2CConversation(item.release_user.mobile, this)
			},
			// 跳转至H5运输列表
			handeleWeb() {
				uni.navigateTo({
					url: '/pages/tabbar/order/web'
				})
			},
			// 获取数据
			getData() {
				// this.listShow = false
				this.$u.api.user.appCheck().then(res => {
					this.vip = res.vip
				})
				uni.showLoading({
					title: this.$t('加载中')
				})


				let params = {
					page: this.page,
					limit: this.limit
				}
				this.$u.api.transport.getTransportList(params).then(res => {
					this.isEvent = true
					let ts = ''
					if (this.lang == 'zh') {
						ts = `您有( ${res.count} ) 条消息推送`
					} else {
						ts = `Обратите внимание, у Вас( ${res.count} ) новых уведомлений!`
					}
					this.text1.push(ts)
					this.listShow = true
					this.total = res.count
					if (this.page == 1) {
						this.arr = res.list
						this.page++
						uni.hideLoading()
						this.freshIsShow = false
					} else {
						this.arr = [...this.arr, ...res.list]
						this.page++
						uni.hideLoading()
						this.freshIsShow = false
					}

				})
			},


			setImage(IMAGE) {
				if (IMAGE.slice(-3) === 'png' || IMAGE.slice(-3) === 'jpg') {
					return IMAGE_URL + IMAGE
				} else if (IMAGE) {
					return IMAGE
				} else {
					return HTTP_IMG_UTL + 'images-zhanweitu.png'

				}
			},
			// 下拉刷新复位
			store() {
				this.freshIsShow = false
			},
			// 下拉刷新触发
			fresh() {
				this.page = 1
				this.freshIsShow = true
				this.getData()
			},
			// 触底加载
			lower() {
				// 触底判断总条数不等于当前数据的条数则获取数据
				if (this.arr.length < this.total) {
					this.getData()
				}
			},
			handeleItem(index) {
				console.log('index:', index);
				this.indexID = index
				if (this.lang == 'zh') {
					this.reason = this.list[index].title
				} else {
					this.reason = this.list[index].title_ru
				}
			},

			// 跳转至详情
			handeleDetail(item) {
				// 不允许跳转逻辑

				//已合作 合作方不是当前用户  
				if (item.release_order.join_user_id != null && item.release_order.join_user_id != this.user_id) return
				//订单已失效 
				if (item.release_order.status == 3 || item.release_order.is_deleted > 0) return

				// 使用encodeURIComponent对字符串进行编码
				let items = encodeURIComponent(JSON.stringify(item));
				uni.navigateTo({
					url: '/pages/tabbar/order/detail?items=' + items
				})
			},
			getLang() {
				// 获取缓存lang当前语言值
				uni.getStorage({
					key: 'lang',
					success: res => {
						if (res.data == 'zh') { //zh为中国，赋值0
							this.lang = 'zh'
						} else { //其他为俄罗斯，赋值1
							this.lang = 'ru'
						}
					}
				});
			},
		},

	}
</script>

<style scoped lang="less">
	.role-tag {
		background-color: #66b1f9;
		color: #fff;
		font-size: 22rpx;
		padding: 6rpx 20rpx;
		border-radius: 50rpx;
		margin-top: 10rpx;
	}

	.fb {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
		font-size: 32rpx;
		position: absolute;
		top: 50%;
		right: 30rpx;
		z-index: 3;

		text-align: center;
		line-height: 100rpx;
	}

	.gb {
		background: linear-gradient(0deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.192) 100%);
		margin-top: 30rpx;
		z-index: 2;
		width: 690rpx;
		height: 80rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.address-info {
		width: 50%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.Currently-unavailable {
		width: 100%;
		height: 300rpx;
		text-align: center;
		line-height: 300rpx;
	}

	.index1-username {
		width: 450rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		word-break: break-all;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;

	}

	.index1_goods3ru {
		font-size: 22rpx;
		color: #999999;
		min-height: 23rpx;
		margin-bottom: 35rpx;
	}

	.index1_goods2ru {
		font-size: 22rpx;
		color: #999999;
		min-height: 23rpx;
		margin-bottom: 8rpx;
	}

	.index1_goods2zh {
		font-size: 22rpx;
		color: #999999;
		min-height: 23rpx;
		margin-bottom: 5rpx;
	}

	.numberStyle {
		width: 170rpx;
	}

	.orderText {
		width: 330rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
	}

	.orderText_ru {
		width: 230rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
		text-align: start;
	}

	.index1_title1 {
		width: 290rpx;
		font-size: 28rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
	}

	.longPressTextClass {
		width: 650rpx;
		min-height: 100rpx;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.address-detail {
		width: 100%;
		display: flex;
		height: 22rpx;
		align-items: center;
		font-size: 22rpx;
		margin-top: 21rpx;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}

	.list_block {
		width: 690rpx;
		height: calc(100vh - 500rpx);
	}

	.scroll-Y {
		width: 690rpx;
		height: 100%;
	}

	.index1_myyunshu {
		font-size: 30rpx;
		color: #FFFFFF;
		position: absolute;
		top: 30rpx;
		left: 30rpx;
	}

	.yunshu_images1 {
		width: 345rpx;
		height: 185rpx;
		position: relative;
		left: -13rpx;
		top: -10rpx;
	}

	.yunshu_images2 {
		width: 314rpx;
		height: 158rpx;
		position: relative;
		left: 0;
		top: 0rpx;
	}

	.index1_message {
		width: 690rpx;
		display: flex;
		align-items: center;
		z-index: 2;
		color: #FFFFFF;
		margin-bottom: 24rpx;
		margin-top: 40rpx;
		font-size: 32rpx;
		letter-spacing: 3rpx;
	}

	.index1_yunshu1 {
		width: 314rpx;
		height: 158rpx;
		border-radius: 24rpx;
		position: relative;
	}

	.index1_yunshu {
		width: 690rpx;
		height: 158rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 2;
		margin-top: 50rpx;
	}

	.index1_headers1 {
		flex: 1;
		width: 450rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 16rpx;
	}

	.index1_headers {
		width: 690rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		margin-top: 84rpx;
		z-index: 2;
	}

	.header {
		width: 750rpx;
		height: 792rpx;

	}

	.index1_goods2_block {
		min-height: 66rpx;
		width: 169rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.index1_goods2 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 24rpx;
	}

	.index1_goods1 {
		color: #999999;
		font-size: 22rpx;
		margin-top: 22rpx;
	}

	.index1_xq4 {
		position: absolute;
		bottom: -24rpx;
		left: 30rpx;
		width: 630rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 22rpx;

		.btn {
			width: 196rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 100rpx;
			color: #fff;
		}
	}


	.index_xq1 {
		width: 196rpx;
		height: 60rpx;
		background: #FF5D5D;
	}

	.index_xq2 {
		width: 196rpx;
		height: 60rpx;
		background: #5282E6;
	}

	.index_xq3 {
		width: 196rpx;
		height: 60rpx;
		background: #06C36E;
	}

	.index1_goods {
		width: 630rpx;
		min-height: 240rpx;
		background: #F6F7FB;
		border-radius: 32rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 24rpx;
	}

	.index1_order1 {
		max-width: 250rpx;
		word-break: break-word;
		border-radius: 22rpx;
		padding: 5rpx 16rpx;
		background: #F32929;
		color: #FFFFFF;
		font-size: 22rpx;
		box-sizing: border-box;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.index1_order {
		width: 630rpx;
		min-height: 100rpx;
		border-radius: 32rpx;
		padding: 30rpx 30rpx 17rpx 30rpx;
		box-sizing: border-box;
		background: #F6F7FB;
		margin-top: 30rpx;

	}

	.index1_images5 {
		min-width: 118rpx;
		height: 40rpx;
		background: #06C36E;
		color: #FFFFFF;
		font-size: 22rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 40rpx;
		box-sizing: border-box;
		padding: 0 12rpx;

	}

	.index1_images4 {
		width: 120rpx;
		height: 40rpx;
		background: #5282E6;
		color: #FFFFFF;
		font-size: 22rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 40rpx;
		box-sizing: border-box;
		padding: 0 15rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
	}

	.index1_images3 {
		width: 185rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.index1_imagescx2 {
		height: 31rpx;
		border-radius: 31rpx;
		background-color: #F32929;
		font-size: 22rpx;
		color: #FFFFFF;
		box-sizing: border-box;
		display: inline-block;
		padding: 0 10rpx;
		text-align: center;
		line-height: 31rpx;
	}

	.index1_images1 {
		width: 349rpx;
		height: 100rpx;
		margin-left: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: flex-start;
	}

	.index1_images {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
	}

	.index1_block {
		width: 690rpx;
		min-height: 688rpx;
		border-radius: 32rpx;
		background-color: #FFFFFF;
		padding: 30rpx 30rpx 54rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		z-index: 2;
		margin-bottom: 70rpx;
	}

	.index1_content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F1F2F4;
	}

	.publish_wrap {
		display: none;
		width: 100%;
		height: calc(50% - 100rpx);
		font-size: 32rpx;
		position: fixed;
		top: 50%;
		right: 0;
		z-index: 3;
		pointer-events: none;

	}

	.fb_img {
		width: 100rpx;
		border-radius: 100rpx;
	}

	.max {
		right: 30rpx;
		left: auto;
		width: auto;
		height: auto;
		pointer-events: fill;
	}

	page {
		width: 100%;
		height: 100%;
		background-color: #F1F2F4;
	}

	.status-mask {
		width: 300rpx;
		height: 300rpx;
		position: absolute;
		right: -30rpx;
		top: -30rpx;
		border-radius: 50%;
		z-index: 99;
	}
</style>